<template>
    <view class="page">
        <!-- 导航栏 -->
        <u-navbar :is-back="false" :background="{ background: '#CA0019' }">
            <view class="header">
                <div class="item">
                    <div><image src="/static/images/scan.png" alt="" /></div>
                    扫一扫
                </div>
                <view class="search-box" @click="$u.route('pages/search/search?type=goods')">
                    <u-search placeholder="输入关键字搜索" :show-action="false" :disabled="true" />
                </view>
                <div class="item">
                    <div><image src="/static/images/kefu.png" alt="" /></div>
                    客服
                </div>
            </view>
        </u-navbar>
        <view class="slides-box">
            <u-swiper interval="5000" height="300" :list="slideList" title @click="clickBanner" mode="dot" indicator-pos="bottomRight" />
        </view>
        <div class="wrap u-p-b-0" style="padding: 30rpx; background: #fff;">
            <scroll-view :scroll-x="true" style="width: 100%; height: 100%; background: #fff;">
                <div class="grid-list">
                    <div class="item" v-for="(listItem, listIndex) in categoryList" :key="listIndex" @click="onList(listItem)">
                        <image :src="listItem.image" style="height: 50px; width: 50px;"></image>
                        <text class="grid-text u-m-t-10">{{ listItem.name }}</text>
                    </div>
                </div>
            </scroll-view>
            <div class="line u-m-t-40"></div>
            <div class="notice">
                <div>
                    <image style="height: 28rpx; width: 60rpx;" src="/static/images/tt.png" mode="" />
                </div>
                <u-notice-bar type="primary" bg-color="#fff" :volume-icon="false" color="#333" :list="noticeList"></u-notice-bar>
            </div>
        </div>
        <div class="two bf">
            <image @click="onBargain" src="https://shop.zdsy.shop/imgs/pintuan.png"></image>
            <image @click="onGroup" src="https://shop.zdsy.shop/imgs/miaosha.png"></image>
        </div>

        <div class="like">
            <image src="/static/images/left-dot.png" mode="" />
            <text>猜你喜欢</text>
            <image src="/static/images/right-dot.png" mode="" />
        </div>
        <div class="u-p-30">
            <goodsItems :list="articleList" />
        </div>
    </view>
</template>

<script>
import pulldownRefresh from "@/components/pulldownRefresh.vue";
import goodsItems from "@/components/goods-items/index";
export default {
    components: {
        pulldownRefresh,
        goodsItems,
    },
    data() {
        return {
            text1: "uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用",
            slideList: [],
            noticeList: [],
            categoryList: [
				{name:'福利商城',image:'https://shop.zdsy.shop/imgs/1.png',url:'https://taobao.zdsy.shop/index.php?r=index/wap',outlink:1},
				{name:'会员专区',image:'https://shop.zdsy.shop/imgs/2.png',url:'pages/redpacket_buy/redpacket_buy',outlink:0},
				{name:'秒杀',image:'https://shop.zdsy.shop/imgs/3.png',url:'pages/activity_list/activity_list?id=17',outlink:0},
				{name:'尖货榜',image:'https://shop.zdsy.shop/imgs/4.png',url:'pages/shop_information/shop_information?id=1',outlink:0},
			],
            current: 0,
            currentCategory: {},
            page: 1,
            articleList: [],
            status: "loading",
			mobile:''
        };
    },
    onLoad(e) {
		// this.mobile = e.mobile;
		this.mobile =  window.location.hash.split('=')[1];
		console.log(this.mobile)
		// console.log();
		// this.getQuery(params);
		if(this.mobile){
			this.$api.post({
			  url: 'user/public/app_login',
			  data: {
			    username: this.mobile,
			    device_type: this.$deviceType
			  },
			  success: res => {
			    this.checkLogin(res);
			  },
			  complete: () => {
			    uni.hideLoading();
			  }
			});
		}
        this.getSlides();
        this.getNotice();
        // this.getCategoryList();
        this.getCategoryArticleList();
    },
    onReachBottom() {
        this.loadMore();
    },
    methods: {
		getQuery( params ){
		       // 通过window.location对象拿到url上？后的参数
		       // substring() 方法用于提取字符串中介于两个指定下标之间的字符 有开始无结尾就是从1开始到末尾的所有
		       var query = window.location.search.substring(1);
		       // 通过&开始分隔
		       var vars = query.split("&");
		       // 对vars数组中的每个字符串通过&分隔
		       for (var i=0;i<vars.length;i++) {
		               var pair = vars[i].split("=");
		               // 分割完之后得到的数组进行判断，拿到需要的参数
		               if(pair[0] == params) return pair[1]
		       }
		       // 如果循环结束都没有需要的参数就返回false
		       return false
		},
		checkLogin(res) {
		  if (res.code == 1) {
		    this.$store.commit('login', res.data);
			
		    // this.$refs.uToast.show({
		    //   title: res.msg,
		    //   type: 'success',
		    //   callback: () => {
		    //     this.$u.route({
		    //       type: 'back'
		    //     });
		    //   }
		    // });
		  } else {
		    // this.$refs.uToast.show({
		    //   title: res.msg,
		    //   type: 'error'
		    // });
		  }
		  this.$toast(res.msg)
		},
        onShop() {
            this.$u.route("pages/shop_information/shop_information?id=1");
        },
        onBargain() {
            this.$u.route("pages/bargain/bargain");
        },
        onGroup() {
            this.$u.route("pages/group_buy/group_buy");
        },
        onMerchantEntering() {
            this.$u.route("pages/index/merchant_enter");
        },
        onRedpacket() {
            this.$u.route("pages/redpacket_buy/redpacket_buy");
        },
        onItem(id, index) {
            this.$u.route("pages/activity_list/activity_list?id=" + id + "&current=" + index);
        },
		onList(item){
			if(item.outlink==1){
				window.location.href = item.url
			}else{
				this.$u.route(item.url);
			}
		},
        refresh() {
            this.page = 1;
            this.articleList = [];
            this.getSlides();
            this.getCategoryArticleList();
        },
        loadMore() {
            if (this.status === "loadmore") {
                this.getCategoryArticleList();
            }
        },
        // 获取文章分类
        getCategoryList() {
            this.$api.get({
                url: "webapp/index/appIndex",
                data: {
                    order: "+id",
                    field: "id,name",
                },
                success: (res) => {
                    console.log(res);
                    if (res.code === "10001") {
                        this.categoryList = res.data.shopCategory;
                        // this.changeCategory(0);
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 切换分类
        changeCategory(index) {
            this.current = index;
            this.currentCategory = this.categoryList[index];
            this.page = 1;
            this.articleList = [];
            this.getCategoryArticleList();
        },
        // 获取分类下文章列表
        getCategoryArticleList() {
            this.status = "loading";
            this.$api.get({
                url: "portal/shop/recommend_list",
                data: {
                    category_id: this.currentCategory.id,
                    page: `${this.page},10`, // 一页显示10条
                    order: "-id",
                    field: "id,post_title,thumbnail,published_time,comment_count,post_hits",
                },
                success: (res) => {
                    if (res.code === "10001") {
                        let articleList = res.list;
                        this.articleList = this.articleList.concat(articleList);
                        // 分页判断
                        if (articleList.length < 10) {
                            this.status = "nomore";
                        } else {
                            this.status = "loadmore";
                            this.page++;
                        }
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
                complete: () => {
                    this.$refs.pulldownRefresh && this.$refs.pulldownRefresh.endPulldownRefresh(); // 停止刷新动画
                },
            });
        },
        // 获取轮播图
        getSlides() {
            this.$api.get({
                url: "webapp/index/appIndex",
                success: (res) => {
                    if (res.code == "10001") {
                        this.slideList = res.data.ads;
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        getNotice() {
            this.$api.get({
                url: "portal/shop/get_notices",
                success: (res) => {
                    if (res.code == 1) {
                        this.noticeList = res.data.map((item) => item.content);
                        console.log(this.noticeList, "-------------");
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 点击轮播图，跳转页面
        clickBanner(e) {
            // this.$u.route(this.slideList[e].description);
            this.$u.route("pages/short_video/short_video");
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    background: rgb(246, 246, 246);
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 0 30rpx;
    font-size: 20rpx;
    /*  #ifndef MP  */
    flex: 1; // 小程序不设置flex:1，避免被右上角的胶囊遮挡
    /*  #endif  */
    .logo {
        margin-left: 2rpx;
        font-size: 12rpx;
        font-weight: bold;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    image {
        width: 30rpx;
        height: 30rpx;
    }
    .search-box {
        flex-grow: 1;
        margin: 0 20rpx;
    }
}
.grid-list {
    display: flex;
    align-items: center;
    background: #fff;
    .item {
        min-width: 170rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
.line {
    width: 100%;
    height: 3rpx;
    background: #e1e1e1;
}
.notice {
    height: 100rpx;
    display: flex;
    align-items: center;
}
.two {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    image {
        height: 200rpx;
        width: 330rpx;
    }
}
.like {
    width: 100%;
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
        padding: 0 30rpx;
    }
    image {
        width: 70rpx;
        height: 20rpx;
    }
}
.notice {
    display: flex;
}
.bf {
    background: #fff;
}
</style>